<template>
	<!-- 页面主体 -->
	<view id="search">
		<!-- 搜索组件宽度自适应于外层 -->
		<view style="padding:25rpx 32rpx; background:#F5F6F7">
			<LhSamllSearch @confirm="confirm" :value="keywords"></LhSamllSearch>
		</view>
		<view class="grace-body" v-if="searchKeyHistory.length>0">
			<view class="grace-title">
				<text class="grace-title-text grace-black">搜索历史</text>
				<text class="icon-clear" @tap="clear">清空</text>
			</view>
			<view class="grace-search-tags grace-wrap">
				<view v-for="(item, index) in searchKeyHistory" :key="index" :data-key="item" class="grace-search-tags-items" @tap="bindCarFood(item)">{{item}}</view>
			</view>
		</view>
		<!-- <view class="grace-body">
					<view class="grace-title">
						<text class="grace-title-text grace-black">热门搜索</text>
					</view>
					<view class="grace-search-tags grace-wrap">
						<view v-for="(item, index) in HotKeyHistory" :key="index" :data-key="item" class="grace-search-tags-items">{{item}}</view>
					</view>
				</view> -->
	</view>
</template>
<script>
	import LhSamllSearch from '@/wxcomponents/lh-small-search/lh-small-search.vue'
	export default {
		data() {
			return {
				searchKeyHistory: [], //搜索历史
				keywords: '', //搜索框内容
				brand: '', //搜索id
				tag: '', //分类id
				status: '', //状态
			}
		},
		onLoad: function(options) {
			// 获取参数
			if (options.keywords && options.keywords != undefined) {
				this.keywords = options.keywords
			}
			if (options.brand && options.brand != undefined) {
				this.brand = options.brand
			}
			if (options.tag && options.tag != undefined) {
				this.tag = options.tag
			}
			if (options.status && options.status != undefined) {
				this.status = options.status
			}
			uni.getStorage({
				key: 'historySearch',
				success: (res) => {
					this.searchKeyHistory = res.data
				}
			})
		},
		methods: {
			// 搜索
			confirm: function(e) {
				if (e != "" && this.searchKeyHistory.indexOf(e) == -1) {
					this.searchKeyHistory.unshift(e);
					uni.setStorageSync('historySearch', this.searchKeyHistory);
					uni.redirectTo({
						url: `/pageA/cat-food/cat-food?keywords=${e}&brand=${this.brand}&tag=${this.tag}&status=${this.status}`
					});
				}
			},

			// 清空历史记录
			clear: function() {
				uni.showModal({
					title: '提示',
					content: '您确定要删除历史记录吗？',
					success: (res) => {
						if (res.confirm) {
							this.searchKeyHistory = [];
							uni.removeStorageSync('historySearch');
						}
					}
				});
			},

			// 点击历史记录搜索
			bindCarFood: function(e) {
				uni.redirectTo({
					url: `/pageA/cat-food/cat-food?keywords=${e}`
				});
			}

		},
		components: {
			LhSamllSearch
		}
	}
</script>
<style scoped lang="scss">
	#search {
		height: 100%;
		background: #FFFFFF;

		.grace-body {
			padding: 0 32rpx;
			margin-top: 16rpx;

			.grace-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #000000;
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 16rpx;

				.icon-clear {
					font-size: 22rpx;
					color: #707070;
					position: relative;

					&::before {
						content: "";
						width: 22rpx;
						height: 22rpx;
						background: url(../../static/images/ljqk.png) no-repeat;
						background-size: cover;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: -30rpx;
					}
				}
			}

			.grace-search-tags {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.grace-search-tags-items {
					height: 40rpx;
					line-height: 40rpx;
					border: 2rpx solid #D0D0D0;
					color: #D0D0D0;
					padding: 0 20rpx;
					font-size: 24rpx;
					border-radius: 20rpx;
					margin: 0 20rpx 20rpx 0
				}
			}
		}
	}
</style>
